<script>
  import Layout from "./page/common/layout"
  export default {
    name: 'App',
    data () {return {}},
    computed:{},
    methods: {
      back(){this.$router.go(-1)}
    },
    beforeMount () {},
    watch: {},
    components:{
      Layout
    }
  }
</script>
<template>
  <div id="app">
      <!-- <Layout /> -->
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <!-- 根据跳转链接渲染的页面 -->
      <div class="menu">
          <span @click="back">&lt;</span>
          <router-link active-class="active" to="/counter">counter</router-link>
          <router-link active-class="active" to="/contact">通讯录</router-link>
      </div>
      <div style="padding-top:2.4em">
        <!-- 路由入口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
      </div>
  </div>
</template>

<style>
*{-webkit-tap-highlight-color:rgba(0,0,0,0)} /*屏蔽点击出现的阴影*/
@media screen and (max-width: 320px) {
   html{font-size: 14px;}
}
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}
}
@media screen and (min-width: 640px) {
    html{font-size: 18px;}
}

* {
-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,figcaption,figure,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.25 Microsoft YaHei,"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif}
html{font-size:16px; background:#f5f5f5;height:100%;}
body{background-color: #fff; font-size: 1rem; max-width:480px; margin:0 auto;min-height:100%;}
table{border-collapse:collapse;border-spacing:0}
a {color: rgb(34, 189, 193);}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clear{height: 0; overflow: hidden; clear: both;}
.fr{float: right}
.fl{float: left}

.menu{height:2em; line-height:2em;border-bottom:1px #e0e0e0 solid; text-align:center;position:fixed;top:0;width:100%; max-width:480px;}
.menu a{display:inline-block; padding:0 1em; }
.menu a:hover{background-color:#ccc;}
.menu a.active{background-color:#a0a0a0; color:#000; font-weight:bold;}
.menu a.active:hover{background-color:#a0a0a0; color:#000;}
.menu span{display:inline-block; font-size:1.5em; padding:0 .6em; float:left;cursor:pointer}

</style>
